<template>
    <view class="vip-change">
        <mescroll-uni
                top="20"
                @down="downCallback"
                @up="upCallback"
                :down="downOption"
                :up="upOption"
                class="mescroll-flex"
                :fixed="false"
                @init="mescrollInit"
        >
            <view
                    class="card-info common-flex-between"
                    v-for="(item, index) in userCards"
                    :key="index"
                    @tap="changeVipHandle(item)"
            >
                <image class="common-choose check-btn"   :src="http+(checkVipId === item.vipCardMemberLogId?'choose-active':'choose')+'.png'"/>
                <view class="card" :style="{'background': item.vipCardMemberLogType === 1 ? '#EFA256' : '#1290F5'}">
                    <view class="title common-flex-between">
                        <view>
                            <text class="icon-vip"/>
                            <text>{{item.vipCardMemberLogName}}</text>
                        </view>
                        <text style="font-size: 19rpx;">NO.{{item.vipCardMemberLogId}}</text>
                    </view>
                    <view class="content common-flex-between">
                        <view>
                            <view class="num-wrapper">
                                <text class="num">{{item.vipCardMemberLogType === 1 ? (item.vipCardMemberLogBorrowFrequency) : getRestDay(item).restDay}}</text>
                                {{item.vipCardMemberLogType === 1 ? '次' : '天'}}
                            </view>
                            <view class="rest">{{item.vipCardMemberLogType === 1 ? '当前可借次数' : '剩余时长'}}</view>
                            <view class="lend">{{item.vipCardMemberLogType === 1 ? '已借次数' : '已用天数'}}：{{item.vipCardMemberLogType === 1 ? (item.vipCardMemberLogBorrowFrequencyTrue+'次') : (getRestDay(item).hasDay+'天')}}</view>
                        </view>
                        <view>
                            <view class="num-wrapper">
                                <text class="num">{{item.vipCardMemberLogBooksNum}}</text>
                                本
                            </view>
                            <view class="rest">当前可借数量</view>
                            <view class="lend">在借数量：{{item.vipCardMemberLogBooksNumTrue}}本</view>
                        </view>
                    </view>
                    <view class="time">
                        有效期： {{ item.vipCardMemberLogActivationTime | formatTime }}至{{ item.vipCardMemberLogEndTime | formatTime }}
                    </view>
                </view>
            </view>
        </mescroll-uni>
        <view class="fix btn-wrappers common-flex-between">
            <text class="white-btn btns" @tap.stop="cancelHandle">取消</text>
            <text class="blue-btn btns" @tap.stop="confirmChange">确认使用</text>
        </view>
        <gwShowModal
                v-model="showModal"
                :type="modalType"
                :width="tipsObj[modalType].width"
                :height="tipsObj[modalType].height"
                :tipsContent="tipsObj[modalType].content"
                @confirm="confirmHandle"/>
    </view>
</template>

<script>
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    import gwShowModal from '@/pages/components/gw-show-modal'
    import { dateFmt } from '@/util/utils';
    import service from "@/service";
    export default {
        name: "card",
        components: {
            MescrollUni, gwShowModal
        },
        onLoad(params){
            let { vipCardMemberLogId, booksNum } = params;
            this.checkVipId = Number(vipCardMemberLogId);
            this.booksNum = Number(booksNum);
            this.userCards = [];
            this.page = 1;
            this.mescroll.resetUpScroll();
            this.getMcards();
        },
        data(){
            return{
                vipCard: [
                    {
                        isChecked: false,
                        type: 'subCard'
                    },
                    {
                        isChecked: false,
                        type: 'timeCard'
                    }
                ],
                http: this.$https,
                checkVipId: '',
                booksNum: '', // 借阅书本的数量
                modalType: 'thumVip2',
                tipsObj: {
                    thumVip2: {
                        content: '当前可用会员卡借阅数量已达上限如需要继续借阅，请继续购卡',
                        width: '560rpx',
                        height: '481rpx'
                    },
                    tips: {
                        content: '当前可用会员卡借阅数量已达上限如需要继续借阅，请更换会员卡',
                        width: '550rpx',
                        height: '290rpx'
                    }
                },
                showModal: false,
                tipsContent: '当前可用会员卡借阅数量已达上限如需要继续借阅，请继续购卡',
                page: 1,
                limit: 10,
                downOption: {
                    auto: false,
                },
                userCards: [],
                upOption:{
                    use: true, // 是否启用上拉加载; 默认true
                    auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    offset: 130,
                    textNoMore:'我是有底线的 >_<'
                },
                mescroll: null,
                orderVipCard: {}
            }
        },
        methods: {
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            downCallback(mescroll){
                this.userCards = [];
                this.page = 1;
                mescroll.resetUpScroll();
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                this.getMcards();
            },
            confirmHandle() {
                this.showModal = false
                if(this.modalType === 'thumVip2'){
                    uni.navigateTo({
                        url: './index'
                    })
                }
            },
            getRestDay(item){
                let activeTime = new Date(Number(item.vipCardMemberLogActivationTime +'000')).getTime()
                let nowTime = new Date().getTime()
                let hasDay = Math.floor((nowTime - activeTime)/86400000)

                return {
                    hasDay,
                    restDay: item.vipCardMemberLogDate - hasDay
                }

            },
            getMcards(){
                uni.showLoading({
                    title: '加载中',
                });
                service.mineService.getMcards({
                    data: {
                        status: 1,
                        page: this.page,
                        limit: this.limit
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let data = res.result.data || [];
                            this.page > 1 ? this.userCards.push(...data) : this.userCards = data;
                            this.userCards.forEach(val => {
                                if(this.checkVipId === val.vipCardMemberLogId){this.orderVipCard = val}
                            })
                            this.mescroll && this.mescroll.endBySize(data.length, res.result.num);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            changeVipHandle(item){
                if(this.checkVipId === item.vipCardMemberLogId){
                    this.checkVipId = '';
                    this.orderVipCard = {};
                } else {
                    this.checkVipId = item.vipCardMemberLogId;
                    this.orderVipCard = item
                }

            },
            confirmChange(){
                if(!this.checkVipId){
                    uni.showToast({
                        title: `请先选择要使用的会员卡哦`,
                        duration: 2500,
                        icon: 'none'
                    });
                    return;
                }
                let remainNum = this.orderVipCard.vipCardMemberLogBooksNum;
                if(remainNum >= this.booksNum){
                    this.$store.commit('orderVipCard', this.orderVipCard);
                    uni.navigateBack(-1);
                } else {
                    this.showModal = true;
                    this.modalType = this.userCards.length > 1 ? 'tips' : 'thumVip2'
                }
            },
            cancelHandle(){
                uni.navigateBack(-1);
            },
        },
        filters: {
            formatTime(value){
                return dateFmt( Number(value+'000'), 'yyyy-MM-dd')
            },
        }
    }
</script>

<style scoped lang="scss">
    .vip-change{
        min-height: calc(100% - 20rpx);
        background: #F2F5F7;
        padding-top: 20rpx;
        .card-info{
            height: 400rpx;
            padding: 34rpx 30rpx;
            box-sizing: border-box;
            background: #ffffff;
            align-items: center;
            color: #ffffff;
            margin-bottom: 20rpx;
            .card{
                flex:0 0 572rpx;
                height:332rpx;
                box-shadow:0px 6rpx 10rpx rgba(18,144,245,0.2);
                opacity:1;
                border-radius:10rpx;
                padding: 20rpx 30rpx;
                box-sizing: border-box;
            }
            .check-btn{
                color: #D8D8D8;
                margin-left: 20rpx;
                font-size: 40rpx;
            }
            .title{
                font-size: 23rpx;
                font-weight: bold;
                .icon-btn{
                    margin-right: 10rpx;
                    font-size: 40rpx;
                }
            }
            .content{
                margin-top: 40rpx;
                .num-wrapper{
                    font-size: 24rpx;
                }
                .num{
                    font-size: 52rpx;
                }
                .rest{
                    font-size: 24rpx;
                    margin-top: 10rpx;
                }
                .lend{
                    font-size: 24rpx;
                    color: rgba(255,255,255,0.6);
                }
            }
            .time{
                font-size: 24rpx;
                color: rgba(255,255,255,0.8);
                margin-top: 30rpx;
            }
        }
        .btn-wrappers{
            bottom: 0;
            align-items: center;
            padding: 0 30rpx;
            height: 110rpx;
            .btns{
                width: 325rpx;
                height: 88rpx;
                text-align: center;
                line-height: 88rpx;
                border-radius: 84rpx;
            }
            .white-btn{
                border: 1rpx solid #2BA8FC;
                border-radius: 37rpx;
                color: #2BA8FC;
            }
            .blue-btn{
                color: #ffffff;
                background: #2BA8FC;
                border-radius: 37rpx;
            }
        }
    }
</style>